<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>案例_省市区联动效果</title>
</head>

<body>
  <div class="container">
    <h4 class="stu-title">案例_省市区联动效果</h4>
    <div class="area-box">
      <span class="title">地区选择</span>
      <select name="province" class="province">
        <option value="">省份</option>
      </select>
      <select name="city" class="city">
        <option value="">城市</option>
      </select>
      <select name="area" class="area">
        <option value="">地区</option>
      </select>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <script>
    /**
   * 目标: 完成省市区下拉列表切换
   *  1.1 设置省份下拉菜单数据  
   *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
   *  1.3 切换城市，设置地区下拉菜单数据
   */

    /*
      省份接口：http://hmajax.itheima.net/api/province
      城市接口：http://hmajax.itheima.net/api/city
            参数：pname 省份名
      区域接口：http://hmajax.itheima.net/api/area
            参数： 
              pname: 省份名
              cname: 城市名
    */

    // 1.1 设置省份下拉菜单数据
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
      document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
    })

    // 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
    document.querySelector('.province').addEventListener('change', async e => {
      // 获取用户选择省份名字
      // console.log(e.target.value)
      const result = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
      const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
      // 把默认城市选项+下属城市数据插入select中
      document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr

      // 清空地区数据
      document.querySelector('.area').innerHTML = `<option value="">地区</option>`
    })

    // 1.3 切换城市，设置地区下拉菜单数据
    document.querySelector('.city').addEventListener('change', async e => {
      console.log(e.target.value)
      const result = await axios({
        url: 'http://hmajax.itheima.net/api/area', params: {
          pname: document.querySelector('.province').value,
          cname: e.target.value
        }
      })
      console.log(result)
      const optionStr = result.data.list.map(aname => `<option value="${aname}">${aname}</option>`).join('')
      console.log(optionStr)
      document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
    })
  </script>
</body>

</html>